<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		
		<!-- 定义样式 -->
		<style>
			.red{
				background-color: red;
				color: aqua;
				font-size: 10px
				px;
			}
		</style>
		
	</head>
	<body>
		<div id="app">
			<h2>v-bind学习</h2>
			<a href="http://www.baidu.com" target="_blank">百度</a><br>
			<!-- 属性绑定语法 -->
			<a v-bind:href="url" target="_blank">百度1</a><br />
			<!-- 简化 -->
			<a :href="url" target="_blank">百度2</a>
			
			<hr />
			
			<h2>样式绑定</h2>
			<!-- 需求 : 控制red是否展现 -->
			<div class="red">AAAAA</div>
			<!-- vue的语法: {red类型名称 : 布尔类型数据}
					{red:ture}
					{red:false}
					-->
			<div :class="{red: flag}">BBBBB</div>
			<!-- 在vue中进行简单的数据计算 -->
			<button @click="flag = !flag">切换</button>
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					url: "http://www.baidu.com",
					flag: true
				},
				//key:value 格式
				methods: {
						
						
					}
			})
		</script>
	</body>
</html>
